import React ,{useState,useEffect} from 'react'
import {Input,Button,Select,Space, Table, } from "antd"
import request from "./utils/Request"

const {Option} = Select
function App() {
    const [data,setData] = useState([])
    const [copyData,setCopyData] = useState([])
    const columns = [
        {
            title: 'Key',
            dataIndex: 'key',
            key: 'key',
            
          },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'city',
          key: 'address',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
          },
        {
            title: 'Date',
            dataIndex: 'date',
            key: 'date',
        },
        {
          title: 'Action',
          key: 'action',
          render: (_, record) => (
            <Space size="middle">
              <a>edit</a>
              <a>Delete</a>
            </Space>
          ),
        },
      ];
    //请求数据
    useEffect(()=>{
        request.get("/table").then(res=>{
            console.log(res);
            if (res.status === 200) {
                setData(res.data.list)
                setCopyData(res.data.list)
            }
        })
    },[])

    //  筛选数据
    const set_state = (value) => {
        setData(copyData.filter(item => item.state  === value))
    }

    //重置按钮
    const get_data = () => {
        request.get("/table").then(res=>{
            if (res.status === 200) {
                setData(res.data.list)
                setCopyData(res.data.list)
            }
        })
    }

    return (
        <div className='app'>
            <header>
                <div className='input'>
                    <p>规则名称： <Input style={{width:"200px"}}  placeholder="请输入" /></p>
                    <div>使用状态： 
                        <Select style={{width: '200px',}} defaultValue="请选择" onChange={set_state}>
                            <Option value="异常">异常</Option>
                            <Option value="关闭">关闭</Option>
                            <Option value="进行中">进行中</Option>
                            <Option value="已上线">已上线</Option>
                        </Select>
                    </div>
                </div>
                <div className='btn'>
                    <Button type="primary">查询</Button>
                    <Button onClick={get_data}>重置</Button>
                    <Button>新建</Button>
                </div>
            </header>
            <main>
                {
                    data&&<Table columns={columns} dataSource={data} />
                }
                
            </main>
        </div>
    )
}

export default App